<template>
	<gui-page :fullPage="true" :isLoading="pageLoading" :apiLoadingStatus="apiLoadingStatus" ref="guipage">
		<template v-slot:gBody>
			<view id="header">
				<gui-a-header title="人才投递"></gui-a-header>
				<view class="header gui-border-b gui-border-box gui-flex gui-column gui-justify-content-center">
					<gui-switch-navigation :width="650" :size="216" :currentIndex="currentIndex" :items="tabs" activeDirection="center" activeLineWidth="140rpx"
						textAlign="center"
						@change="navchange"></gui-switch-navigation>
				</view>
			</view>
			<swiper :current="currentIndex" :style="{height:mainHeight+'px', width:'750rpx'}" @change="swiperChange">
				<!-- 轮播项目数量对应 上面的选项标签 -->
				<swiper-item v-for="(items, orderIndex) in dataList" :key="orderIndex">
					<!-- 使用滚动区域来实现主体内容区域 -->
					<scroll-view :style="{height:mainHeight+'px'}" :scroll-y="true" @touchstart="touchstart"
						@touchmove="touchmove" @touchend="touchend" @scrolltolower="loadmorefun" @scroll="scroll">
						<!-- 刷新组件 -->
						<gui-refresh @reload="reload" ref="refreshcom"></gui-refresh>
						<gui-empty v-if="items.length <= 0">
							<template v-slot:img>
								<view class="gui-flex gui-rows gui-justify-content-center">
									<image class="nodata-img" src="../../static/image/no_curriculum_vitae.png" mode="widthFix">
									</image>
								</view>
							</template>
							<template v-slot:text>
								<text class="gui-text-small gui-block gui-text-center gui-margin-top gui-color-gray">暂无数据</text>
								<view class="zw" style="height: 200rpx;"></view>
							</template>
						</gui-empty>
						<!-- 数据展示区域 -->
						<view class="deliver-list bgfff" v-if="items != null">
							<view class="deliver-item" v-for="(order, oIndex) in items"
								:key="oIndex">
								<view class="top gui-flex gui-align-items-start">
									<view class="photo">
										<gui-image :src="order.userImg" :width="115" :height="115" borderRadius="60rpx" mode="aspectFill"></gui-image>
										<image class="sex_img" v-if="order.userSex == '0'" src="../../static/image/man.png" mode="widthFix"></image>
										<image class="sex_img" v-if="order.userSex == '1'" src="../../static/image/woman.png" mode="widthFix"></image>
									</view>
									<view class="info">
										<view class="f26 c333">
											{{order.userName}}
										</view>
										<view class="f22 stress mt10">
											投递岗位：{{order.postTitle}}
										</view>
										<view class="f22 c666 mt10">
											投递时间：{{order.createTime}}
										</view>
										<view class="sgin gui-flex">
											<view class="sgin-item">
												{{order.userAge}}岁
											</view>
											<view class="sgin-item">
												{{order.workTime}}
											</view>
											<view class="sgin-item" v-if="order.education">
												{{order.education}}
											</view>
											<view class="sgin-item stress-warp" v-if="order.workStatus">
												{{order.workStatus}}
											</view>
										</view>
									</view>
								</view>
								<view class="hang gui-flex gui-justify-content-end mt20">
									<view class="btn refuse f16" v-if="order.notRefuse == 2" @click="refuseFun(order)">
										拒绝<text class="bai-icons ml8 c666">&#xe620;</text>
									</view>
									<view class="btn refused f16" v-if="order.notRefuse == 1">
										已拒绝<text class="bai-icons ml8 cfff">&#xe620;</text>
									</view>
									<view class="btn f16" :class="{'check': order.shFollow == 1}" @click="followFun(order)">
										{{(order.shFollow == 0) ? '人才关注' : '已关注'}}<text class="gui-icons ml8 cfff">&#xe6ad;</text>
									</view>
									<view class="btn f16" @click="callPhone(order)">
										一键拨号<text class="bai-icons ml8 cfff">&#xe625;</text>
									</view>
									<view class="btn f16" @click="$u.to(`/pages/mine/curriculumVitae/curriculum-vitae?type=firm&id=${order.id}`)">
										查看详情<text class="gui-icons ml8 cfff">&#xe609;</text>
									</view>
								</view>
							</view>
						</view>
						<!-- 加载组件 -->
						<gui-loadmore ref="loadmorecom"></gui-loadmore>
					</scroll-view>
				</swiper-item>
			</swiper>

		</template>
	</gui-page>
</template>

<script setup>
	import graceJS from "@/Grace6/js/grace.js"
	import {
		ref,
		reactive,
		onMounted,
		inject
	} from 'vue';
	const $u = reactive(inject('$u'))
	import {
		getUserFollowUp,
		selectPostTodayMonthAndAllList,
		butUserPostFou
	} from '@/api/company.js';
	const loadmorecom = ref([])
	const refreshcom = ref([])

	const pageSize = 10;
	// 查询条件
	const query = ref({
		pageType: '1'
	})
	const pages = ref([])
	const scrollTops = ref([])
	const apiLoadStatus = ref([])
	const navHeight = ref(getApp().globalData.navHeight)
	const guipage = ref(null);
	const dataList = ref([]);
	const pageLoading = ref(true);
	const apiLoadingStatus = ref(false);
	const mainHeight = ref(200)
	const currentIndex = ref(0)
	const scrollTimer = ref(null)
	const loadMoreTimer = ref(null)
	const tabs = ref([{
		id: 1,
		name: ''
	}]);

	onMounted(() => {
		setTimeout(() => {
			graceJS.getRefs(guipage, 0, (ref) => {
				ref.getDomSize('guiPageBody', (e) => {
					console.log(e);
					graceJS.select('#header', (e2) => {
						mainHeight.value = e.height - e2.height;
					})
				});
			});
		}, 200)
		setTimeout(() => {
			tabs.value = [{
					id: 1,
					name: '今日投递'
				}, {
					id: 2,
					name: '本月投递'
				},
				{
					id: '',
					name: '全部投递'
				}
			];
			for (var i = 0; i < tabs.value.length; i++) {
				dataList.value.push([]);
				pages.value.push(1);
				scrollTops.value.push(0);
				apiLoadStatus.value.push(false);
			}
			loadData();
		}, 500);
	})

	const navchange = (e) => {
		currentIndex.value = e;
	}

	const swiperChange = (e) => {
		currentIndex.value = e.detail.current;
		let tabsData = Object.assign(tabs.value, {})
		query.value.pageType = tabsData[e.detail.current].id;
		loadCom();
	}

	const scroll = (e) => {
		if (scrollTimer.value != null) {
			clearTimeout(scrollTimer.value);
		}
		scrollTimer.value = setTimeout(() => {
			scrollTops.value.splice(currentIndex.value, 1, e.detail.scrollTop);
		}, 100);
	}

	const touchstart = (e) => {
		if (apiLoadStatus.value[currentIndex.value]) {
			return;
		}
		if (scrollTops.value[currentIndex.value] > 0) {
			return;
		}
		refreshcom.value[currentIndex.value].touchstart(e);
	}

	const touchmove = (e) => {
		if (apiLoadStatus.value[currentIndex.value]) {
			return;
		}
		if (scrollTops.value[currentIndex.value] > 0) {
			return;
		}
		refreshcom.value[currentIndex.value].touchmove(e);
	}
	const touchend = (e) => {
		if (apiLoadStatus.value[currentIndex.value]) {
			return;
		}
		if (scrollTops.value[currentIndex.value] > 0) {
			return;
		}
		refreshcom.value[currentIndex.value].touchend(e);
	}

	const reload = (isReload = true) => {
		pages.value[currentIndex.value] = 1;
		loadmorecom.value[currentIndex.value].stoploadmore();
		loadData(isReload);
	}

	const loadmorefun = () => {
		let currentIndex = currentIndex.value;
		if (apiLoadStatus.value[currentIndex]) {
			return;
		}
		if (loadmorecom.value[currentIndex].loadMoreStatus != 0) {
			return;
		}
		if (loadMoreTimer.value != null) {
			clearTimeout(loadMoreTimer.value);
		}
		loadMoreTimer.value = setTimeout(() => {
			loadmorecom.value[currentIndex].loading();
			loadData();
		}, 80);
	}
	
	const loadCom = ()=> {
		if(!dataList.value[currentIndex.value]) {
			return;
		}
		if(dataList.value[currentIndex.value].length < 1) {
			reload(false);
		}
	}

	const loadData = (isReload) => {
		let queryParam = Object.assign(query.value, {})
		let currentValue = currentIndex.value;
		selectPostTodayMonthAndAllList({
			pageNum: pages.value[currentValue],
			pageSize,
			...queryParam
		}).then(res => {
			if (res.code == 200) {
				let total = Math.ceil(res.total / pageSize);
				if (pages.value[currentValue] == 1) {
					dataList.value.splice(currentValue, 1, res.rows);
				} else {
					dataList.value[currentValue] = dataList.value[currentValue].concat(res.rows);
					loadmorecom.value[currentValue].stoploadmore();
					if (pages.value[currentValue] >= total) {
						loadmorecom.value[currentValue].nomore();
					}
				}
			}
			if (isReload) {
				refreshcom.value[currentValue].endReload();
			}
			pages.value[currentValue]++;
			apiLoadStatus.value.splice(currentValue, 1, false);
			pageLoading.value = false;
		})
	}
	
	const followFun = (item)=> {
		getUserFollowUp({
			refCustomId: item.refUserId
		}).then(res => {
			if(res.code == 200) {
				if(item.shFollow == 1) {
					item.shFollow = 0;
					$u.msg('已取消关注')
				}else {
					item.shFollow = 1;
					$u.msg('已关注')
				}
			}
		})
	}
	
	const refuseFun = (item) => {
		butUserPostFou({
			id: item.refUserPostInfoId
		}).then(res => {
			if (res.code == 200) {
				$u.msg("已拒绝")
				if (item.notRefuse == 2) {
					item.notRefuse = 1;
				}
			}
		})
	}
	
	const callPhone = (item) => {
		if(item.userPhone) {
			$u.makePhone(item.userPhone.toString());
		}
	}
</script>

<style lang="scss">
	.header {
		background-color: #fff;
		padding: 15rpx 30rpx;
		height: 100rpx;
	}
</style>